<template>
  <div class="riskWarning"
    ref="projectTableRef">
    <el-table size="small"
      stripe
      :data="arrlist">
      <el-table-column label="排名"
        prop="index"
        width="55px"
        align="center">
        <template slot-scope="scope">
          <span>
            {{ scope.$index + 1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="单位名称"
        prop="name"
        align="center"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <span>
            {{ scope.row.name?scope.row.name:"---" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="资源数量"
        prop="expenditure"
        width="120px"
        align="center">
        <template slot-scope="scope">
          <span>
            {{ scope.row.expenditure?scope.row.expenditure:"---" }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      activeName: 'kyss',
      arrlist: []
    }
  },
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      this.arrlist = [
        {
          name: '国防科技创新研究院',
          type: '科研设施',
          expenditure: '3678'
        },
        {
          name: '军事医学研究院',
          type: '科研设施',
          expenditure: '5250'
        },
        {
          name: '系统工程研究院',
          type: '科研设施',
          expenditure: '3340'
        },
        {
          name: '国防工程研究院',
          type: '科研设施',
          expenditure: '2400'
        },
        {
          name: '军队政治工作研究院',
          type: '科研设施',
          expenditure: '2165'
        },
        {
          name: '战争研究院',
          type: '仪器设备',
          expenditure: '3124'
        },
        {
          name: '防化研究院',
          type: '仪器设备',
          expenditure: '2910'
        },
        {
          name: '军事法制研究院',
          type: '仪器设备',
          expenditure: '213'
        },
        {
          name: '评估论证中心',
          type: '仪器设备',
          expenditure: '478'
        },
        {
          name: '军事科学信息中心',
          type: '软件系统',
          expenditure: '480'
        }
      ]
      this.initScroll()
    },
    // 数据滚动
    initScroll() {
      // 拿到table挂在后的真实DOM
      const table = this.$refs.projectTableRef
      // 拿到挂在数据的div
      const divData = table
      // 鼠标移入停止滚动
      divData.onmouseover = () => {
        clearInterval(this.t)
      }
      // 初次调用
      this.start(divData)
      // 鼠标移出开始滚动
      divData.onmouseout = () => {
        this.start(divData)
      }
    },
    start(divData) {
      if (divData.clientHeight > divData.scrollHeight) {
        return
      }
      this.t = setInterval(() => {
        divData.scrollTop += 1
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0
        }
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
.riskWarning {
  position: relative;
  height: 96%;
  overflow: hidden;
}
::v-deep {
  .el-table .el-table__header-wrapper th,
  .el-table .el-table__fixed-header-wrapper th {
    font-family: PingFangSC-Medium;
    font-size: 14px !important;
    font-weight: 500;
  }
  .el-table {
    font-family: PingFangSC-Regular;
    font-size: 14px !important;
    color: #eafff0;
    font-weight: 400;
    background-color: transparent !important;
  }
  .el-table th.el-table__cell > .cell {
    font-size: 14px !important;
    color: #7cb4ff !important;
  }
  .el-table td.el-table__cell div {
    font-size: 14px !important;
  }
  .el-table th,
  .el-table tr,
  .el-table td {
    height: 30px;
    line-height: 30px;
    background-color: transparent !important;
  }

  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 0px solid #ebeef5;
  }

  .el-table_row {
    background-color: transparent !important;
  }
  .el-table::before {
    //去除底部白线
    background-color: transparent !important;
  }
}
</style>